<template >
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="父菜单">
            <el-cascader
              v-model="ruleForm.ArrcheckedNode"
              :options="options"
              :props="{
                checkStrictly: true,
                value: 'menuId',
                label: 'menuName',
              }"
              clearable
            ></el-cascader></el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="ruleForm.menuName" @input="GetFull()"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="menuTypes">
            <el-radio-group v-model="ruleForm.menuTypes">
              <el-radio
                v-for="item in menuTypeslist"
                :label="item.id"
                :key="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12">
          <el-form-item label="菜单路由" prop="menuRoute">
            <el-input v-model="ruleForm.menuRoute"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="ruleForm.component"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重定向" prop="redirect">
            <el-input v-model="ruleForm.redirect"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单图标" prop="icon">
            <e-icon-picker v-model="ruleForm.icon" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由名称" prop="routeName">
            <el-input v-model="ruleForm.routeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Api接口" prop="menuAPI">
            <el-input v-model="ruleForm.menuAPI"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import pinyin from "js-pinyin";
import { GetMenu } from "@/api/admin";
import { MenuUpd } from "@/api/admin";
import { MenuById } from "@/api/admin";
export default {
  props: {
    ids: String,
  },
  data() {
    return {
      ruleForm: {
        menuName: "",
        region: "",
        menuRoute: "",
        component: "",
        redirect: "",
        icon: "",
        routeName: "",
        menuAPI: "",
        parentId: 0,
        checkedNode: "",
        menuTypes: "",
        ArrcheckedNode: [],
        menuTypelist: "",
      },
      rules: {
        menuName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      options: [],
      menuTypeslist: [
        {
          id: 1,
          name: "目录",
        },
        {
          id: 2,
          name: "菜单",
        },
        {
          id: 3,
          name: "按钮",
        },
      ],
    };
  },
  methods: {
    submitForms(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.parentId = this.ruleForm.ArrcheckedNode.slice(-1)[0];
          this.ruleForm.menuTypelist = this.ruleForm.ArrcheckedNode.toString();
          console.log(this.ruleForm);
          MenuUpd(this.ruleForm).then((res) => {
            if (res.data) {
              this.$message.success("修改成功");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //显示方法
    GetMenus() {
      GetMenu().then((res) => {
        this.options = res.data;
      });
    },
    GetFull() {
      this.ruleForm.menuRoute = pinyin.getFullChars(this.ruleForm.menuName);
    },
    GetMenuss() {
      let id = JSON.parse(window.sessionStorage.getItem("id"));
      MenuById(id).then((res) => {
        let arrList = res.data.menuTypelist.split(",");
        let renArry = [];
        arrList.forEach((ele) => {
          if (ele) {
            renArry.push(parseInt(ele, 10));
          }
        });
        console.log(renArry);
        this.ruleForm = {
          menuName: res.data.menuName,
          region: res.data.region,
          menuRoute: res.data.menuRoute,
          component: res.data.component,
          redirect: res.data.redirect,
          icon: res.data.icon,
          routeName: res.data.routeName,
          menuAPI: res.data.menuAPI,
          parentId: res.data.parentId,
          checkedNode: res.data.checkedNode,
          menuTypes: res.data.menuTypes,
          ArrcheckedNode: renArry,
          //menuTypelist: res.data.menuTypelist,
        };
      });
    },
  },
  created() {
    this.GetMenus();
    this.GetMenuss();
  },
};
</script>
<style >
.el-cascader-menu__wrap {
  height: 240px;
}
</style>